import {
	Box,
	Field,
	TextInput,
	ButtonGroup,
	Button,
	Margins,
	Tabs,
	Flex,
} from '@rocket.chat/fuselage';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import React, { useRef, useState } from 'react';

import AutoCompleteAgent from '../../../client/components/AutoCompleteAgent';
import Page from '../../../client/components/Page';
import { useTranslation } from '../../../client/contexts/TranslationContext';
import { useForm } from '../../../client/hooks/useForm';
import DateRangePicker from './DateRangePicker';
import Result from './Result';
import RoomAutoComplete from './RoomAutoComplete';
import UserAutoCompleteMultiple from './UserAutoCompleteMultiple';
import VisitorAutoComplete from './VisitorAutoComplete';

const initialValues = {
	msg: '',
	type: '',
	dateRange: {
		start: '',
		end: '',
	},
	visitor: '',
	agent: 'all',
	rid: '',
	users: [],
};

const AuditPage = () => {
	const t = useTranslation();

	const { values, handlers } = useForm(initialValues);
	const setData = useRef(() => {});

	const [errors, setErrors] = useState({});

	const {
		msg,
		type,
		dateRange: { start: startDate, end: endDate },
		visitor,
		agent,
		users,
		rid,
	} = values;

	const {
		handleMsg,
		handleType,
		handleVisitor,
		handleAgent,
		handleUsers,
		handleRid,
		handleDateRange,
	} = handlers;

	const useHandleType = (type) =>
		useMutableCallback(() => {
			handleVisitor('');
			handleAgent();
			handleRid('');
			handleUsers([]);
			handleType(type);
		});

	const onChangeUsers = useMutableCallback((value, action) => {
		if (!action) {
			if (users.includes(value)) {
				return;
			}
			return handleUsers([...users, value]);
		}
		handleUsers(users.filter((current) => current !== value));
	});

	const apply = useMutableCallback(() => {
		if (!rid && type === '') {
			return setErrors({
				rid: t('The_field_is_required', t('Channel_name')),
			});
		}

		if (users.length < 2 && type === 'd') {
			return setErrors({
				users: t('Select_at_least_two_users'),
			});
		}

		if (type === 'l') {
			const errors = {};

			if (agent === '') {
				errors.agent = t('The_field_is_required', t('Agent'));
			}

			if (visitor === '') {
				errors.visitor = t('The_field_is_required', t('Visitor'));
			}

			if (errors.visitor || errors.agent) {
				return setErrors(errors);
			}
		}

		setErrors({});

		setData.current({
			msg,
			type,
			startDate: new Date(startDate),
			endDate: new Date(`${endDate}T23:59:00`),
			visitor,
			agent,
			users,
			rid,
		});
	});

	return (
		<Page>
			<Page.Header title={t('Message_auditing')} />
			<Tabs>
				<Tabs.Item selected={type === ''} onClick={useHandleType('')}>
					{t('Channels')}
				</Tabs.Item>
				<Tabs.Item selected={type === 'u'} onClick={useHandleType('u')}>
					{t('Users')}
				</Tabs.Item>
				<Tabs.Item selected={type === 'd'} onClick={useHandleType('d')}>
					{t('Direct_Messages')}
				</Tabs.Item>
				<Tabs.Item selected={type === 'l'} onClick={useHandleType('l')}>
					{t('Omnichannel')}
				</Tabs.Item>
			</Tabs>
			<Page.ScrollableContentWithShadow mb='neg-x4'>
				<Margins block='x4'>
					<Box display='flex' flexDirection='row' mi='neg-x4' justifyContent='stretch'>
						<Margins inline='x4'>
							<Flex.Item shrink={1}>
								<Field>
									<Field.Label>{t('Message')}</Field.Label>
									<Field.Row>
										<TextInput value={msg} onChange={handleMsg} placeholder={t('Search')} />
									</Field.Row>
								</Field>
								<Field>
									<Field.Label>{t('Date')}</Field.Label>
									<Field.Row>
										<DateRangePicker onChange={handleDateRange} display='flex' flexGrow={1} />
									</Field.Row>
								</Field>
							</Flex.Item>
						</Margins>
					</Box>
					<Box display='flex' flexDirection='row' alignItems='flex-end'>
						<Flex.Item shrink={1}>
							{type === '' && (
								<Field>
									<Field.Label>{t('Channel_name')}</Field.Label>
									<Field.Row>
										<RoomAutoComplete
											error={errors.rid}
											value={rid}
											onChange={handleRid}
											placeholder={t('Channel_Name_Placeholder')}
										/>
									</Field.Row>
									{errors.rid && <Field.Error>{errors.rid}</Field.Error>}
								</Field>
							)}
							{type === 'u' && (
								<Field>
									<Field.Label>{t('Users')}</Field.Label>
									<Field.Row>
										<UserAutoCompleteMultiple
											error={errors.users}
											value={users}
											onChange={onChangeUsers}
											placeholder={t('Username_Placeholder')}
										/>
									</Field.Row>
									{errors.users && <Field.Error>{errors.users}</Field.Error>}
								</Field>
							)}
							{type === 'd' && (
								<Field>
									<Field.Label>{t('Users')}</Field.Label>
									<Field.Row>
										<UserAutoCompleteMultiple
											error={errors.users}
											value={users}
											onChange={onChangeUsers}
											placeholder={t('Username_Placeholder')}
										/>
									</Field.Row>
									{errors.users && <Field.Error>{errors.users}</Field.Error>}
								</Field>
							)}
							{type === 'l' && (
								<>
									<Margins inline='x4'>
										<Field>
											<Field.Label flexGrow={0}>{t('Visitor')}</Field.Label>
											<Field.Row>
												<VisitorAutoComplete
													error={errors.visitor}
													value={visitor}
													onChange={handleVisitor}
													placeholder={t('Username_Placeholder')}
												/>
											</Field.Row>
											{errors.visitor && <Field.Error>{errors.visitor}</Field.Error>}
										</Field>
										<Field>
											<Field.Label flexGrow={0}>{t('Agent')}</Field.Label>
											<Field.Row>
												<AutoCompleteAgent
													error={errors.agent}
													value={agent}
													onChange={handleAgent}
													placeholder={t('Username_Placeholder')}
												/>
											</Field.Row>
											{errors.agent && <Field.Error>{errors.agent}</Field.Error>}
										</Field>
									</Margins>
								</>
							)}
							<ButtonGroup mis='x8' align='end'>
								<Button primary onClick={apply}>
									{t('Apply')}
								</Button>
							</ButtonGroup>
						</Flex.Item>
					</Box>
					<Result setDataRef={setData} />
				</Margins>
			</Page.ScrollableContentWithShadow>
		</Page>
	);
};

export default AuditPage;
